<template>
  <div id="homePage">
    <div class="page-container">
      <!-- 左侧边栏过滤器 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <h2 class="sidebar-title">学习阶段</h2>
          <p class="sidebar-subtitle">按教育阶段筛选合适的题库</p>
        </div>

        <div class="sidebar-illustration">
          <img
            src="@/assets/education.svg"
            alt="教育插图"
            class="education-img"
          />
        </div>

        <a-menu
          :selected-keys="[selectedSchoolLevel]"
          @menu-item-click="handleSchoolLevelMenuClick"
          :style="{ border: 'none' }"
        >
          <a-menu-item key="">
            <template #icon>
              <icon-apps />
            </template>
            全部阶段
          </a-menu-item>
          <a-menu-item key="PRIMARY">
            <template #icon>
              <icon-book />
            </template>
            小学
            <div class="menu-item-description">适合6-12岁学生</div>
          </a-menu-item>
          <a-menu-item key="MIDDLE">
            <template #icon>
              <icon-experiment />
            </template>
            初中
            <div class="menu-item-description">适合12-15岁学生</div>
          </a-menu-item>
          <a-menu-item key="HIGH">
            <template #icon>
              <icon-computer />
            </template>
            高中
            <div class="menu-item-description">适合15-18岁学生</div>
          </a-menu-item>
        </a-menu>

        <div class="sidebar-footer">
          <p>选择合适的阶段，发现更专业的题库</p>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content">
        <div class="searchBar">
          <a-input-search
            :style="{ width: '320px' }"
            placeholder="快速发现答题应用"
            button-text="搜索"
            size="large"
            search-button
            v-model="searchValue"
            @search="doSearch"
          />
        </div>

        <a-list
          class="list-demo-action-layout"
          :grid-props="{ gutter: [20, 20], sm: 24, md: 12, lg: 8, xl: 6 }"
          :bordered="false"
          :data="dataList"
          :pagination-props="{
            pageSize: searchParams.pageSize,
            current: searchParams.current,
            total,
          }"
          @page-change="onPageChange"
        >
          <template #item="{ item }">
            <AppCard :app="item" />
          </template>
        </a-list>
      </div>
    </div>
    <ai-generate-chat-drawer />
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import AppCard from "@/components/AppCard.vue";
import API from "@/api";
import { listAppVoByPageUsingPost } from "@/api/appController";
import message from "@arco-design/web-vue/es/message";
import { REVIEW_STATUS_ENUM, EDUCATION_STAGE_ENUM, EDUCATION_STAGE_MAP } from "@/constant/app";
import AiGenerateChatDrawer from "@/view/add/components/AiGenerateChatDrawer.vue";
import {
  IconApps,
  IconBook,
  IconExperiment,
  IconComputer,
  IconCalendar,
} from "@arco-design/web-vue/es/icon";

// 学校级别对应的教育阶段映射
type SchoolLevelKey = "" | "PRIMARY" | "MIDDLE" | "HIGH";
const SCHOOL_LEVEL_MAP: Record<SchoolLevelKey, number | undefined> = {
  "": undefined, // 全部
  PRIMARY: EDUCATION_STAGE_ENUM.PRIMARY, // 小学
  MIDDLE: EDUCATION_STAGE_ENUM.MIDDLE, // 初中
  HIGH: EDUCATION_STAGE_ENUM.HIGH, // 高中
};

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  current: 1,
  pageSize: 12,
};
const searchParams = ref<API.AppQueryRequest>({
  ...initSearchParams,
});
const dataList = ref<API.AppVO[]>([]);
const total = ref<number>(0);
const searchValue = ref("");
const selectedSchoolLevel = ref<SchoolLevelKey>("");

/**
 * 加载数据
 */
const loadData = async () => {
  const params = {
    reviewStatus: REVIEW_STATUS_ENUM.PASS,
    ...searchParams.value,
  };
  const res = await listAppVoByPageUsingPost(params);
  if (res.data.code === 0) {
    dataList.value = res.data.data?.records || [];
    total.value = res.data.data?.total || 0;
  } else {
    message.error("获取数据失败，" + res.data.message);
  }
};

/**
 * 当分页变化时，改变搜索条件，触发数据加载
 * @param page
 */
const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

// 搜索方法
const doSearch = (value: string) => {
  searchParams.value = {
    ...initSearchParams,
    reviewStatus: REVIEW_STATUS_ENUM.PASS,
    appName: value,
    educationStage: SCHOOL_LEVEL_MAP[selectedSchoolLevel.value],
  };
  searchValue.value = "";
};

const handleSchoolLevelChange = () => {
  searchParams.value = {
    ...searchParams.value,
    current: 1, // Reset to first page when filter changes
    educationStage: SCHOOL_LEVEL_MAP[selectedSchoolLevel.value],
  };
};

// 处理菜单点击
const handleSchoolLevelMenuClick = (key: string) => {
  selectedSchoolLevel.value = key as SchoolLevelKey;
  handleSchoolLevelChange();
};

/**
 * 监听 searchParams 变量，改变时触发数据的重新加载
 */
watchEffect(() => {
  loadData();
});
</script>

<style scoped>
#homePage {
  height: 100%;
}

.page-container {
  display: flex;
  height: 100%;
}

.sidebar {
  width: 250px;
  background-color: #f9faff;
  border-right: 1px solid var(--color-border);
  padding: 0;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 24px 16px 16px;
  background: linear-gradient(135deg, #7cb8ff, #165dff);
  color: #fff;
  margin-bottom: 16px;
}

.sidebar-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.sidebar-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-illustration {
  text-align: center;
  margin-bottom: 16px;
  padding: 0 16px;
}

.education-img {
  width: 160px;
  height: 160px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.menu-item-description {
  font-size: 12px;
  color: var(--color-text-3);
  margin-top: 4px;
  margin-left: 30px;
}

:deep(.arco-menu-item) {
  height: auto !important;
  padding: 12px 16px !important;
  margin: 4px 12px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

:deep(.arco-menu-item:hover) {
  background-color: rgba(var(--primary-6), 0.1) !important;
  transform: translateX(4px);
}

:deep(.arco-menu-selected-item) {
  background-color: rgba(var(--primary-6), 0.15) !important;
  color: rgb(var(--primary-6)) !important;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(var(--primary-6), 0.2);
}

:deep(.arco-menu-selected-item .menu-item-description) {
  color: rgba(var(--primary-6), 0.8) !important;
}

:deep(.arco-menu-item .arco-icon) {
  font-size: 20px !important;
  margin-right: 10px !important;
}

.sidebar-footer {
  text-align: center;
  padding: 16px;
  background-color: rgba(var(--primary-6), 0.05);
  border-top: 1px solid rgba(var(--primary-6), 0.1);
  margin-top: auto;
  font-size: 13px;
  color: var(--color-text-2);
}

.content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
}

.searchBar {
  text-align: center;
  margin-bottom: 32px;
}

.list-demo-action-layout .image-area {
  width: 183px;
  height: 119px;
  overflow: hidden;
  border-radius: 2px;
}

.list-demo-action-layout .list-demo-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-fill-3);
}

.list-demo-action-layout .image-area img {
  width: 100%;
}

.list-demo-action-layout .arco-list-item-action .arco-icon {
  margin: 0 4px;
}
</style>
